<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>家政服务 - 会员中心</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }

        .avatar-ring {
            position: relative;
            border: 3px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .badge {
            position: absolute;
            bottom: -5px;
            right: -5px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: bold;
            color: white;
            background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .feature-card {
            transition: all 0.3s ease;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: #4f46e5;
            background-color: rgba(79, 70, 229, 0.1);
        }

        .stats-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .nav-item {
            transition: all 0.2s ease;
        }

        .nav-item.active {
            color: #4f46e5;
        }

        .nav-item.active .nav-icon {
            color: #4f46e5;
        }

        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }

        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>

<body class="max-w-md mx-auto">
    <!-- 顶部用户信息区 -->
    <div class="gradient-bg text-white px-6 pt-12 pb-8 rounded-b-3xl">
        <div class="flex items-center justify-between mb-6">
            <div class="flex items-center">
                <div class="relative">
                    <div class="avatar-ring w-16 h-16 rounded-full bg-white overflow-hidden">
                        <img src="https://s.coze.cn/image/v8LYW8YhQ64/" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <div class="badge">3</div>
                </div>
                <div class="ml-4">
                    <h2 class="text-xl font-bold">张阿姨</h2>
                    <p class="text-sm opacity-90">高级会员·三星</p>
                </div>
            </div>
            <!-- 提现按钮 -->
            <button onclick="window.location.href='withdraw.html'" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 flex items-center">
                <i class="fas fa-wallet mr-2"></i>
                提现
            </button>
        </div>

        <div class="flex justify-between">
            <div class="text-center">
                <p class="text-sm opacity-90">积分</p>
                <p class="text-lg font-bold">1280</p>
            </div>
            <div class="text-center">
                <p class="text-sm opacity-90">红包</p>
                <p class="text-lg font-bold">¥58.00</p>
            </div>
        </div>
    </div>

    <!-- 功能入口区 -->
    <div class="px-4 py-6">
        <div class="grid grid-cols-4 gap-4 mb-6">
            <a href="my-points.html" class="feature-card p-4 text-center block">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-coins"></i>
                </div>
                <p class="text-sm">我的积分</p>
            </a>
            <a href="my-package.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-envelope"></i>
                </div>
                <p class="text-sm">我的红包</p>
            </a>
            <a href="my-income.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-wallet"></i>
                </div>
                <p class="text-sm">我的收入</p>
            </a>
            <a href="my-contracts.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-file-contract"></i>
                </div>
                <p class="text-sm">我的合同</p>
            </a>
        </div>

        <div class="grid grid-cols-4 gap-4 mb-6">
            <a href="my-recommend.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-user-plus"></i>
                </div>
                <p class="text-sm">我的推荐</p>
            </a>
            <a href="my-bank.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-credit-card"></i>
                </div>
                <p class="text-sm">银行卡管理</p>
            </a>
            <a href="../class/business-school-no.html" class="feature-card p-4 text-center block">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-question-circle"></i>
                </div>
                <p class="text-sm">商学院</p>
            </a>
            <a href="../user/user-profile.html" class="feature-card p-4 text-center">
                <div class="feature-icon mx-auto">
                    <i class="fas fa-exchange-alt"></i>
                </div>
                <p class="text-sm">身份切换</p>
            </a>
        </div>
    </div>

    <!-- 分销数据区 -->
    <div class="px-4 mb-6">
        <div class="stats-card p-6">
            <h3 class="text-lg font-bold mb-4">分销数据</h3>
            <div class="flex justify-between mb-4">
                <div>
                    <p class="text-sm text-gray-500">推荐人数</p>
                    <p class="text-sm">一级 12人 / 二级 28人</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">累计收益</p>
                    <p class="text-xl font-bold text-indigo-600">¥2,560.00</p>
                </div>
            </div>
            <button class="w-full py-2 bg-indigo-100 text-indigo-600 rounded-lg text-sm font-medium">
                查看详情
            </button>
        </div>
    </div>

    <!-- 底部导航 -->
    <div
        class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 flex justify-around py-2 max-w-750 mx-auto">
        <a href="aunt-home.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-home text-lg mb-1"></i>
            <span>首页</span>
        </a>
        <a href="order-grab.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-bolt text-lg mb-1"></i>
            <span>抢单</span>
        </a>
        <a href="aunt-orders.html" class="nav-tab flex flex-col items-center px-4 py-1 text-xs text-gray-500">
            <i class="fas fa-clipboard-list text-lg mb-1"></i>
            <span>订单</span>
        </a>
        <a href="member-center.html" class="nav-tab active flex flex-col items-center px-4 py-1 text-xs">
            <i class="fas fa-user text-lg mb-1"></i>
            <span>我的</span>
        </a>
    </div>

    <script>
        // 简单的交互效果
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('click', function () {
                // 这里可以添加点击后的逻辑，比如跳转到对应页面
                console.log('点击了功能入口:', this.querySelector('p').textContent);
            });
        });
    </script>
</body>

</html>